<template>
  <div class="fullMain" style="max-height: calc(100% - 50px);overflow: scroll;">
    <div style="position:fixed; width:100%; z-index:999">
      <x-header
        :left-options="{backText: '',showBack: false}"
        :right-options="{showMore: true}"
        @on-click-more="showMenusOfPersonalInfo = true"
      >个人信息</x-header>
    </div>
    <div style="height:60px" />
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert">{{alertText}}</alert>
    </div>
    <div v-transfer-dom>
      <actionsheet
        :menus="personalInfoActions"
        @on-click-menu="selectPersonalInfoAction"
        v-model="showMenusOfPersonalInfo"
        show-cancel
      ></actionsheet>
    </div>
    <!-- 注销说明 -->
    <load-more
      style="font-size:40px"
      v-show="isShowWrittenOffIntro"
      :tip="writtenOffIntro + waitTimeRemain"
      background-color="#fbf9fe"
    ></load-more>
    <!-- 底部导航栏 -->
    <NavigationOfReport :flagOfItem.sync="flagOfItem"></NavigationOfReport>
    <div v-if="!userInfo" style="text-align:center">您尚未登陆！</div>
    <group v-show="isShowWrittenOffIntro===false" v-if="userInfo">
      <cell
        title="头像"
        @click.native="isClick=!isClick;"
        is-link
        :arrow-direction="isClick ? 'down' : 'up'"
      >
        <img class="info_img" v-bind:src="userInfo.detail.avatar" alt />
      </cell>
      <div v-if="isClick">
        <cell title="真实姓名" @click.native="nameModify" is-link>{{ userInfo.detail.name }}</cell>
        <cell title="电话" @click.native="phoneModify" is-link>{{ userInfo.detail.phone }}</cell>
        <cell title="邮箱" @click.native="emailModify" is-link>{{ userInfo.detail.email }}</cell>
        <cell title="学校" @click.native="placeModify" is-link>{{ userInfo.detail.place }}</cell>
        <cell
          v-if="userInfo.detail.studentId"
          title="学号"
          @click.native="studentIdModify"
          is-link
        >{{ userInfo.detail.studentId }}</cell>
        <cell
          v-if="userInfo.detail.tutor"
          title="导师"
          @click.native="tutorModify"
          is-link
        >{{ userInfo.detail.tutor }}</cell>
      </div>
      <cell title="日程安排" :link="{name:'S_mainview'}">
        <template v-slot:icon>
          <i class="fa fa-calendar" aria-hidden="true"></i>
          &nbsp;
        </template>
      </cell>
      <cell title="学习分析" :link="{name:'StatisticChart'}">
        <template v-slot:icon>
          <i class="fa fa-bar-chart" aria-hidden="true"></i>
          &nbsp;
        </template>
      </cell>
      <!-- 周统计的入口 -->
      <cell title="周统计报告" :link="{name:'StatisticChartReport'}">
        <template v-slot:icon>
          <i class="fa fa-bar-chart" aria-hidden="true"></i>
          &nbsp;
        </template>
      </cell>


    </group>
    <div style="height:20px" />

    <div v-transfer-dom>
      <confirm
        v-model="isShowConfirmModify"
        title="个人信息修改"
        :show-input="true"
        :placeholder="confirmText"
        @on-cancel="onCancel"
        @on-confirm="onConfirmModifyInfo"
      >
        <p style="text-align:center;">test</p>
      </confirm>
    </div>
    <div v-transfer-dom>
      <confirm
        v-model="isShowConfirmWrittenOff"
        title="用户注销"
        @on-cancel="onCancel"
        @on-confirm="onConfirmWrittenOff"
      >
        <p style="text-align:center;">请问是否需要将个人账户注销？您的所有数据将不能恢复，请慎重考虑!</p>
      </confirm>
    </div>
  </div>
</template>

<script>
import {
  XHeader,
  XInput,
  Confirm,
  Group,
  Cell,
  XButton,
  Actionsheet,
  TransferDom,
  LoadMore,
} from "vux";
import { mapState, mapActions } from "Vuex";
import user from "api/user";
import NavigationOfReport from "components/Navigation/NavigationOfReport.vue";

export default {
  name: "U_information",
  data() {
    return {
      alertText: "", // 验证提示框的文本
      isShowAlert: false, // 是否显示验证提示框
      isShowConfirmWrittenOff: false,
      isShowConfirmModify: false,
      confirmText: "", // 修改信息提示框文本
      modifyType: "",
      flagOfItem: "information",
      showMenusOfPersonalInfo: false,
      personalInfoActions: {
        fine: "未提交罚款",
        writtenOff: "注销我的账号",
      },
      isShowWrittenOffIntro: false,
      writtenOffIntro:
        "注销个人账号后，您存储的日报等其他相关信息会被彻底被删除，并且无法恢复，注销请三思，距注销操作剩余秒数：",
      waitTimeRemain: 30,
      isClick: false,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userType: (state) => state.user.userType,
    }),
  },
  methods: {
    ...mapActions("user", ["setUserInfo"]),
    back() {
      this.$router.go(-1);
    },
    showAlert(alertText) {
      this.isShowAlert = true;
      this.alertText = alertText;
    },
    closeTip() {
      this.isShowAlert = false;
      this.alertText = "";
    },
    nameModify() {
      this.modifyType = "name";
      this.isShowConfirmModify = true;
      this.confirmText = "请输入姓名";
    },
    phoneModify() {
      this.modifyType = "phone";
      this.isShowConfirmModify = true;
      this.confirmText = "请输入电话号码";
    },
    emailModify() {
      this.modifyType = "email";
      this.isShowConfirmModify = true;
      this.confirmText = "请输入邮箱";
    },
    placeModify() {
      this.modifyType = "place";
      this.isShowConfirmModify = true;
      this.confirmText = "请输入学校名称";
    },
    studentIdModify() {
      this.modifyType = "studentId";
      this.isShowConfirmModify = true;
      this.confirmText = "请输入学号";
    },
    tutorModify() {
      this.modifyType = "tutor";
      this.isShowConfirmModify = true;
      this.confirmText = "请输入导师姓名";
    },
    async onConfirmModifyInfo(value) {
      value = value.replace(/\s+/g, ""); //去除输入内容中的空格
      let reg = /^[ ]*$/;
      if (reg.test(value)) {
        this.showAlert("内容不可为空");
        return;
      }
      let tempUserInfo = this.userInfo;
      if ("name" === this.modifyType) {
        tempUserInfo.detail.name = value;
      } else if ("phone" === this.modifyType) {
        tempUserInfo.detail.phone = value;
      } else if ("email" === this.modifyType) {
        tempUserInfo.detail.email = value;
      } else if ("place" === this.modifyType) {
        tempUserInfo.detail.place = value;
      } else if ("studentId" === this.modifyType) {
        tempUserInfo.detail.studentId = value;
      } else if ("tutor" === this.modifyType) {
        tempUserInfo.detail.tutor = value;
      }
      const result = await user.postUserPersonalInfo(tempUserInfo);
      if (result.code === 0) {
        //如果失败了显示提示
        this.showAlert(result.message);
      } else {
        this.showAlert("信息修改成功!");
        this.setUserInfo(tempUserInfo);
        setTimeout(() => {
          this.closeTip();
        }, 1000);
      }
    },
    selectPersonalInfoAction(value) {
      if ("fine" === value) {
        this.$router.push({ name: "U_fine_order_page" });
      }
      if ("writtenOff" === value) {
        // this.isShowWrittenOffIntro = true
        this.showLoading();
      }
    },
    showLoading() {
      this.isShowWrittenOffIntro = true;
      let that = this;
      let timer = setInterval(function () {
        that.waitTimeRemain--;
        if (that.waitTimeRemain === 0) {
          that.waitTimeRemain = 30;
          clearInterval(timer);
          that.isShowWrittenOffIntro = false;
          that.isShowConfirmWrittenOff = true;
        }
      }, 1000);
    },
    Logout() {
      this.isShowConfirmWrittenOff = true;
    },
    onCancel() {
      this.isShowConfirmWrittenOff = false;
    },
    async onConfirmWrittenOff() {
      const result = await user.deleteUser(this.userInfo.userId);
      if (result.code === 0) {
        this.showAlert(result.message);
      } else {
        WeixinJSBridge.call("closeWindow");
      }
    },
  },
  components: {
    XHeader,
    XInput,
    Confirm,
    NavigationOfReport,
    Group,
    Cell,
    XButton,
    Actionsheet,
    LoadMore,
  },
  directives: {
    TransferDom,
  },
};
</script>
<style scoped>
.info_img {
  height: 40px;
  width: 40px;
  float: right;
  border-radius: 3px;
}
.info_label {
  float: right;
  margin-right: 5px;
  color: #5f6368;
}
.info {
  width: 95%;
  height: auto;
  margin: 5px auto;
  list-style: none;
}
.info li {
  height: auto;
  width: 100%;
  list-style: none;
  border-bottom: #ececec solid;
  margin: 15px auto;
  padding-bottom: 5px;
  padding-left: 2px;
}
.base li:first-child {
  height: 50px;
}
.base li:first-child span {
  line-height: 50px;
  vertical-align: bottom;
}
.base,
.degree {
  padding-left: 5px;
}
.my_button {
  height: 35px;
  width: auto;
  padding: 3px;
  color: #fff;
  background: #1abc9c;
  border: none;
  font-size: 16px;
  cursor: pointer;
  outline: 0;
  margin-left: 40%;
  border-radius: 3px;
}
</style>
